<template>
  <Tel
    :attributes="attributes"
    :events="events"
    :methods="methods"
  >
    <template #com>
      <el-button type="primary" @click="open()">
        点击打开窗口
      </el-button>
    </template>
    {{code}}
  </Tel>
  <LiMiDialog
    v-model:visible="visible"
    title="窗口标题"
    @submitForm="submitForm"
  >
    <p>窗口内容...</p>
  </LiMiDialog>
  <div class="link text-center">
    <a target="_blank" href="https://element-plus.gitee.io/#/zh-CN/component/dialog">LiMiDialog 由 element-plus 的 dialog 组件继承，详情点击访问 </a>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { LiMiDialog } from '@/components/LiMiDialog'
import Tel from './template/Tel.vue'
import { Attribute, Event } from './type'
export default defineComponent({
  components: {
    LiMiDialog,
    Tel
  },
  setup() {
    const visible = ref(false)
    const attributes: Array<Attribute> = [
      {
        argu: 'visible',
        instruction: '双向绑定，窗口显示隐藏',
        type: 'boolean',
        option: 'true/false',
        default: 'false'
      },
      {
        argu: 'title',
        instruction: '窗口标题',
        type: 'string',
        option: '-',
        default: '标题'
      },
      {
        argu: 'hideConfirm',
        instruction: '隐藏提交的表单按钮',
        type: 'boolean',
        option: 'true/false',
        default: 'false'
      },
      {
        argu: 'closeOnClickModal',
        instruction: '是否通过点击 modal 关闭窗口',
        type: 'boolean',
        option: 'true/false',
        default: 'false'
      },
      {
        argu: 'disableConfirm',
        instruction: '是否禁用提交表单按钮',
        type: 'boolean',
        option: 'true/false',
        default: 'false'
      },
      {
        argu: 'confirmType',
        instruction: '提交表单按钮的默认样式',
        type: 'string',
        option: '参考 element button',
        default: 'primary'
      },
      {
        argu: 'confirmValue',
        instruction: '提交表单按钮的内容',
        type: 'string',
        option: '-',
        default: '确定'
      },
      {
        argu: 'hideClose',
        instruction: '是否隐藏取消按钮',
        type: 'boolean',
        option: 'true/false',
        default: 'false'
      }
    ]
    const events: Array<Event> = [
      {
        name: 'submitForm',
        instruction: '提交表单',
        argu: '回调参数hide方法，执行关闭当前窗体'
      }
    ]
    const methods: Array<Event> = [
      {
        name: 'beforeClose',
        instruction: '关闭窗体前执行',
        argu: '回调参数hide方法，执行关闭当前窗体'
      }
    ]
    const code: string = `
<LiMiDialog
    v-model:visible="visible"
    title="窗口标题"
    @submitForm="submitForm"
  >
    <p>窗口内容...</p>
</LiMiDialog>
<script>
import { LiMiDialog } from '@/components/LiMiDialog'
<script>
`
    return {
      visible,
      open: () => {
        visible.value = true
      },
      submitForm: (done) => {
        alert('提交表单')
        done()
      },
      attributes,
      events,
      code,
      methods
    }
  }
})
</script>
<style lang="less" scoped>
.link {
  margin-top: 16px;
  font-size: 14px;
}
</style>
